// 库引入
import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import classNames from 'classnames';

// 组件引入
import {Item} from './Item';

// 样式引入
import styles from './style.module.less';

@observer
class LibsList extends Component {
  render() {
    return (
      <ul
        className={classNames(styles.libsList, this.props.className)}
        style={this.props.style}>
        {
          this.props.data.map(([name,desc,star]) => (<Item key={name} name={name} desc={desc} star={star} />))
        }
      </ul>
    );
  }
}

LibsList.defaultProps = {
  data: [
    [
      "bootstrap", "The most popular front-end framework for developing responsive, mobile first pro" +
          " jects on the web.",
      124952
    ],
    [
      "react", "React is a JavaScript library for building user interfaces.", 96958
    ],
    [
      "react-dom", "The entry point of the DOM-related rendering paths. It is intended to be paired " +
          "with the isomorphic React, which is shipped as react to npm.",
      96958
    ],
    ["vue", "Simple, Fast & Composable MVVM for building interactive interfaces", 95673]
  ]
};

const InjectLibsList = inject(({
  libsStore = {}
}) => ({data: libsStore.visibleLibs}))(LibsList);

export {LibsList, InjectLibsList};